<!--  -->
<template>
  <div
    id="comment-button"
    :class="[status ? 'comment-true' : 'comment-false']"
    @click="changeStatus"
  >
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-cmpinglun1"></use>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: {
    status: {
      type: Boolean,
      default: false,
      required: true,
    },
  },

  components: {},

  computed: {},

  methods: {
    changeStatus() {},
  },
};
</script>
<style>
#comment-button {
  position: relative;
  height: 50px;
  width: 50px;
  cursor: pointer;
}
#comment-button > .icon {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 17px;
  top: 17px;
}
.comment-true {
  color: rgb(4, 143, 250);
  transition: all 0.3s;
}
.comment-false {
  color: rgb(170, 184, 194);
  transition: all 0.3s;
}
.comment-false:hover {
  color: rgb(4, 143, 250);
}
</style>